<template>
  <div>
    <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
      <span style="line-height: 60px;font-size: 20px;">用户管理</span>
    </div>

    <!-- 用户搜索卡片 -->
    <el-card style="margin: 20px;height: 70px;">
      <el-form :inline="true">
        <el-form-item label="用户搜索" style="width: 270px;">
          <el-input placeholder="请输入姓名" v-model="searchUserForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="loadUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户数据表格卡片 -->
    <el-card style="margin: 20px;">
      <el-table :data="userArr">
        <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center"></el-table-column>
        <el-table-column label="性别" prop="gender" align="center"></el-table-column>
        <el-table-column label="部门" align="center">
          <template #default="{row}">
            {{ getDeptName(row.departmentId) }}
          </template>
        </el-table-column>
        <el-table-column label="上级" align="center" width="200">
          <template #default="{row}">
            {{ formatParent(row.parentId) }}
          </template>
        </el-table-column>
        <el-table-column label="职级" align="center">
          <template #default="{row}">
            {{ formatLevel(row.level) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button link type="text"
                       :disabled="getUser.level < 30 && scope.row.id !== getUser.id" @click="resetPassword(scope.row.id)">密码重置</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          style="margin-top: 20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[3, 4, 5]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { Message } from 'element-ui';

export default {
  data() {
    return {
      getUser: this.$getUser(),
      searchUserForm: {
        name: ''
      },
      userArr: [],
      departmentOptions: [],
      pagination: {
        current: 1,
        size: 3,
        total: 0
      }
    };
  },
  mounted() {
    this.loadUser();
    this.loadDepartments();
  },
  methods: {
    // 加载用户列表
    loadUser() {
      let data = qs.stringify({
        ...this.searchEmployeeForm,
        pageCurrent: this.pagination.current,
        pageSize: this.pagination.size
      });
      axios.get(this.$BASE_URL + '/v1/user/list?'+data)
          .then((res) => {
            if (res.data.state === 2000) {
              this.userArr = res.data.data.userList;
              this.pagination.total = res.data.data.total;
            } else {
              Message.error(res.data.message);
            }
          });
    },

    // 加载部门列表
    loadDepartments() {
      axios.get(this.$BASE_URL +'/v1/department/list')
          .then(res => {
            if (res.data.state === 2000) {
              this.departmentOptions = res.data.data;
            } else {
              Message.error(res.data.message);
            }
          })
    },

    // 获取部门名称
    getDeptName(deptId) {
      const dept = this.departmentOptions.find(d => d.id === deptId);
      return dept ? dept.name : '未知部门';
    },

    // 格式化职级显示
    formatLevel(level) {
      const levelMap = {
        '10': '普通员工',
        '20': '部门主管',
        '30': '部门经理',
        '40': '总经理'
      };
      return levelMap[level] || level;
    },

    // 格式化上级显示
    formatParent(parentId) {
      const parent = this.userArr.find(emp => emp.id === parentId);
      return parent ? parent.name : '无';
    },

    resetSearch() {
      this.searchUserForm = {};
      this.loadUser();
    },

    resetPassword(id) {
      axios.post(this.$BASE_URL + `/v1/user/update/resetPassword/${id}`)
          .then((res) => {
            if (res.data.state === 2000) {
              Message.success(res.data.message);
            } else {
              Message.error(res.data.message);
            }
          });
    },

    // 分页大小改变
    handleSizeChange(size) {
      console.log(size)
      this.pagination.size = size;
      this.loadUser();
    },

    // 当前页改变
    handleCurrentChange(current) {
      console.log(current)
      this.pagination.current = current;
      this.loadUser();
    },
  }
};
</script>

<style scoped>

</style>
